<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 来编写一个基本的组件 </title>
    <script src="https://unpkg.com/vue@next"></script>
    </head>
<body>
    <div id="app"></div>
</body>
<script>
   const app = Vue.createApp({ //注意实例赋值给一个变量 (即把mount部分独立起来)
        template:`
                <div>
                    <my-title/> 
                </div>`
                
    }).mount("#app")            //有了app变量 方便自定义组件使用 代码如下 标题组件

    app.component("my-title",{
        template: '<h1 style="text-align:center">象牙山洗脚城</h1>' 
    })

    app.component("sum",{
        data(){
            return{
                count:0
            }
        },
        template:"<b>这是一个组件</b>"
    })
                                //组件定义后 在app模板中使用 把组件my-title 放在实例模板template的最上面


                                /*
     vue最主要的特性 使用组件化开发 页面上你看到的任何东西 都可以是组件 
        //如何编写一个静态组件 编写一个标题组件 
    
      */
</script>
</html>